---
title: Configuración del editor de código
description: Configura tu editor de código para desarrollar con Astro.
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

Personaliza tu editor de código para mejorar tu experiencia de desarrollo con Astro y desbloquear nuevas funcionalidades.

## VS Code

[VS Code](https://code.visualstudio.com/) es un editor de código popular para desarrolladores web, desarrollado por Microsoft. El motor de VS Code también funciona en los editores de código en el navegador como [GitHub Codespaces](https://github.com/features/codespaces) y [Gitpod](https://gitpod.io/).

Astro funciona en cualquier editor de código. Sin embargo, recomendamos usar VS Code para tus proyectos de Astro. Nosotros mantenemos la [extensión oficial de Astro para VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) que desbloquea nuevas funcionalidades y mejora la experiencia de desarrollo para sus proyectos.

- Resaltado de sintaxis para archivos `.astro`.
- Información de tipos de TypeScript para archivos `.astro`.
- [Intellisense de VS Code](https://code.visualstudio.com/docs/editor/intellisense) para autocompletado, sugerencias y más.

Para empezar, instala la [extensión de Astro para VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode).

import ReadMore from '~/components/ReadMore.astro'

<ReadMore>Aprende cómo [configurar TypeScript](/es/guides/typescript/) en tu proyecto de Astro.</ReadMore>

## Zed

[Zed](https://zed.dev/) es un editor de código de alto rendimiento y de código abierto. Puedes instalar la [extensión de Astro](https://github.com/zed-extensions/astro) en la pestaña de Extensiones de la IDE. Esta extensión incluye funciones como resaltado de sintaxis, autocompletado y formateo de código.

### IDE de JetBrains

[Webstorm](https://www.jetbrains.com/webstorm/) es una IDE para JavaScript y TypeScript que añadió soporte para el servidor de lenguaje de Astro en la versión 2024.2. Esta actualización trae características como resaltado de sintaxis, autocompletado y formateo de código.

Instala el plugin oficial a través del [Marketplace de JetBrains](https://plugins.jetbrains.com/plugin/20959-astro) o buscando "Astro" en la pestaña de Plugins de la IDE. Puedes activar el servidor de lenguaje en `Settings | Languages & Frameworks | TypeScript | Astro`.

Para obtener más información sobre el soporte de Astro en Webstorm, consulta [la documentación oficial de Astro en Webstorm](https://www.jetbrains.com/help/webstorm/astro.html).

## Otros editores de código

Nuestra increíble comunidad mantiene extensiones para otros editores de código incluyendo:

- [Extensión de VS Code para Open VSX](https://open-vsx.org/extension/astro-build/astro-vscode)<span style="margin: 0.25em;"><Badge text="oficial" /></span> - La extensión oficial de VS Code, está disponible en el registro de Open VSX para otras plataformas como [Cursor](https://cursor.com) o [VSCodium](https://vscodium.com/).
- [Vim Plugin](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Comunidad" /></span> - Provee resaltado de sintaxis, indentación y compatibilidad con folding de código para Astro en Vim o Neovim.
- Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/configs.md#astro) y [TreeSitter](https://github.com/virchau13/tree-sitter-astro) Plugins <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Comunidad" /></span> - Provee resaltado de sintaxis, análisis de árboles y autocompletado para Astro en Neovim.
- Emacs - Ve las instrucciones para [Configurar Emacs y Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Comunidad" /></span> para trabajar con Astro
- [Resaltado de sintaxis de Astro para Sublime Text](https://packagecontrol.io/packages/Astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Comunidad" /></span> - El paquete Astro para Sublime Text, disponible en el gestor de paquetes de Sublime Text.
- [Extensión de Nova](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/)<span style="margin: 0.25em;"><Badge class="neutral-badge" text="Comunidad" /></span> - Provee resaltado de sintaxis y autocompletado para Astro en Nova.

## Editores de código del navegador

Además de editores de código locales, Astro también funciona en editores de código en el navegador, incluyendo:

- [StackBlitz](https://stackblitz.com/) y [CodeSandbox](https://codesandbox.io) - editores de código online del navegador, con resaltado de sintaxis incorporado para archivos `.astro`. ¡No necesita instalación o configuración!
- [GitHub.dev](https://github.dev/) - te permite instalar la extensión de Astro para VS Code como una [extensión web](https://code.visualstudio.com/api/extension-guides/web-extensions), la cual te da acceso a solo algunas de las características de la extensión completa. Actualmente, solo soporta el resaltado de sintaxis.
- [IDX](https://idx.dev) y [Gitpod](https://gitpod.io/) - es un entorno de desarrollo en la nube en el que puedes instalar la extensión de VS Code oficial desde Open VSX.

## Otras herramientas

### ESLint

[ESLint](https://eslint.org/) es un linter popular para JavaScript y JSX. Para activar la compatibilidad con Astro, puedes instalar [un plugin mantenido por la comunidad](https://github.com/ota-meshi/eslint-plugin-astro).

Consulta [la guía del usuario del proyecto](https://ota-meshi.github.io/eslint-plugin-astro/user-guide/) para obtener más información sobre cómo instalar y configurar ESLint para tu proyecto.

### Stylelint

[Stylelint](https://stylelint.io/) es un popular linter para CSS. Existe una [configuración de Stylelint mantenida por la comunidad](https://github.com/ota-meshi/stylelint-config-html) que ofrece soporte para Astro.

Las instrucciones de instalación, integración del editor e información adicional se pueden encontrar en el archivo README del proyecto.

### Biome

[Biome](https://biomejs.dev/) es un linter y formateador todo en uno para la web. [Biome actualmente tiene soporte parcial para archivos `.astro`](https://biomejs.dev/internals/language-support/#html-super-languages-support), y puede usarse para linting y formateo del frontmatter en archivos `.astro`.


### Prettier

[Prettier](https://prettier.io/) es un formateador popular para JavaScript, HTML, CSS y más. Si estás usando la [extensión de VS Code de Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode), el formateo de código con Prettier está incluido.

Para dar soporte al formateo de archivos `.astro` fuera del editor (por ejemplo, CLI) o dentro de editores que no soportan nuestras herramientas de editor, instala [el plugin oficial de Prettier de Astro](https://github.com/withastro/prettier-plugin-astro).

<Steps>
1. Instala `prettier` y `prettier-plugin-astro`.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install --save-dev --save-exact prettier prettier-plugin-astro
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add --save-dev --save-exact prettier prettier-plugin-astro
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add --dev --exact prettier prettier-plugin-astro
      ```
      </Fragment>
    </PackageManagerTabs>

2. Crea un archivo de configuración `.prettierrc` (o `.prettierrc.json`, `.prettierrc.mjs`, u [otros formatos soportados](https://prettier.io/docs/configuration)) en la raíz de tu proyecto y añáde `prettier-plugin-astro`.

    En este archivo, también especifica manualmente el analizador para los archivos Astro.

    ```json title=".prettierrc"
    {
      "plugins": ["prettier-plugin-astro"],
      "overrides": [
        {
          "files": "*.astro",
          "options": {
            "parser": "astro"
          }
        }
      ]
    }
    ```

3. Opcionalmente, instala otros plugins de Prettier para tu proyecto y agrégalos al archivo de configuración. Estos plugins adicionales pueden necesitar estar listados en un orden específico. Por ejemplo, si usas Tailwind, `prettier-plugin-tailwindcss` debe ser [el último plugin de Prettier en el array de plugins](https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins).

    ```json title=".prettierrc"
    {
      "plugins": [
        "prettier-plugin-astro",
        "prettier-plugin-tailwindcss" // debe ser el último
      ],
      "overrides": [
        {
          "files": "*.astro",
          "options": {
            "parser": "astro"
          }
        }
      ]
    }
    ```

4. Ejecuta el siguiente comando `prettier . --write` en tu terminal para formatear tus archivos.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npx prettier . --write
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm exec prettier . --write
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn exec prettier . --write
      ```
      </Fragment>
    </PackageManagerTabs>
</Steps>

Consulta el [README del plugin de Prettier](https://github.com/withastro/prettier-plugin-astro/blob/main/README.md) para obtener más información sobre sus opciones, cómo configurar Prettier dentro de VS Code y más.

### dprint

[dprint](https://dprint.dev/) es un formateador de código altamente configurable que soporta muchos lenguajes, incluyendo JavaScript, TypeScript, CSS y más. El soporte para archivos `.astro` se puede añadir usando el [plugin markup_fmt](https://github.com/g-plane/markup_fmt).
